* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
p{
    margin: 0;
    word-wrap:break-word; 
}
a{
    text-decoration: none;
    color: black;
}
//底部导航
.iot_bottom {
    display: flex;
    justify-content:space-around;
    position: fixed;
    top: 100%;
    transform: translate(0,-100%);
    width: 10rem;
    height: 1.3178rem;
    background-color: #fff;
    span {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: .969rem;
        font-size: .2907rem;
        text-align: center;
    }
    span img {
        width: .5814rem;
        margin: .1938rem 0 .0581rem;
    }
    
}
.iot_selected_color {
    color:#28ba9b;
}
// 内容部分
#iot_content {
    width: 10rem;
}

//热门推荐
.iot_hotPage {
    position: fixed;
    left: 100%;
    top: 0;
    transition: all .5s;
    z-index: 0;
    //热门推荐顶部
    .iot_hotTop {
        position: fixed;
        transform: translate(0,0);
        width: 10rem;
        height: 3.72rem;
        background-size: contain;
        z-index: 1;
        div {
            position: fixed;
            top: 2.4rem;
            left: 50%;
            height: 1.36rem;
            width: 9.52rem;
            transform: translate(-50%);
            font-size: .4rem;
            background-color: #fff;
            border-radius: .1rem;
            box-shadow: 0 .08rem .08rem 0 rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        span{
            position: relative;
            div{
                position: absolute;
                left: 50%;
                transform: translate(-50%,0);
                top: .7rem;
                width: .56rem;
                height: .04rem;
            }
            div.iot_hotActive{
                background-color: #27ba9b;
            }
        }
        img {
            position: fixed;
            transform: translate(.4rem,.4rem);
            width: .6rem;
            height: .6rem;
        }
    }
    iframe{
        width: 10rem;
        position: fixed;
        transform: translate(0,3.72rem);
        z-index: 0;
    }
}

// 商品详情
div[class^=iot_details] {
    z-index: 0;
    width: 10rem;
    transition: all .5s;
    position: fixed;
    top: 0;
    left: 100%;
    background-color: #fff;
    .iot_imgNumber{
        position: absolute;
        z-index: 2;
        display: inline-block;
        width: 1.08rem;
        height: .52rem;
        text-align: center;
        line-height: .52rem;
        font-size: .3rem;
        color: #ffffff;
        transform: translate(8.52rem,9rem);
        background-color: rgba(0,0,0,0.3);
        border-radius: .26rem;
    }
    .iot_DetailsCancel{
        z-index: 3;
        position: absolute;
        transform: translate(.4rem,.4rem);
        width: .6rem;
        height: .6rem;
    }
    .swiper img{
        width: 10rem;
        height: 10rem;
        vertical-align: top;
    }
    .iot_price {
        width: 10rem;
        height: 1.68rem;
        background-color: #35c8a9;
        display: flex;
        align-items: center;
        font-weight: 500;
        color: white;
        font-size: .7rem;
    }
    .iot_price::before {
        content: '￥';
        margin-left: .32rem;
        margin-top: .2rem;
        font-size: .44rem;
    }
    .iot_above {
        width: 10rem;
        height: 1.8rem;
        background-color: #fff;
        display: flex;
        flex-direction:column;
        justify-content: space-evenly;
        padding: .24rem;
        border-bottom: .02rem solid #e4e4e4;
    }
    .iot_above p:nth-child(1){
        font-size: .44rem;
    }
    .iot_above p:nth-child(2) {
        font-size: .34rem;
        color: #cf4444;
    }
    .iot_under div{
        position: relative;
        width: 10rem;
        height: 1.2rem;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding-left:.4rem;
        border-bottom: .02rem solid #e4e4e4;
        font-size: .34rem;
        span {
            color: #999999;
            margin-right: .3rem;
        }
    }
    .iot_under div::after {
        content:'';
        position: absolute;
        right: .48rem;
        display: inline-block;
        width: .2rem;
        height: .2rem;
        border-top: .02rem solid #999999;
        border-right: .02rem solid #999999;
        transform: rotate(45deg);
    }
    .iot_information{
        border-top:.28rem solid #f4f4f4;
        padding-top: .4rem;
        .iot_infoUp {
            border-left:.04rem solid #27ba9b;
            font-size: .4rem;
            font-weight:bold;
            margin-left: .3rem;
            margin-bottom: .4rem;
            padding-left: .12rem;
            line-height: .4rem;
        }
        div {
            display: flex;
            margin: 0 .3rem;
            padding: .3rem 0;
            border-bottom: .03rem dashed #cccccc;
            font-size: .34rem;
            span{
                width: 2.8rem;
                padding-left: .08rem;
            }
            p {
                width: 6.6rem;
            }
        }
    }
    .iot_picture {
        display: flex;
        flex-direction: column;
        margin-top: .4rem;
        width: 10rem;
        img {
            width: 10rem;
        }
    }
    //同类推荐
    .iot_relevant{
        width: 10rem;
        background-color: #f4f4f4;
        overflow: hidden;
        margin-bottom: 1.3rem;
        .iot_relUp {
            margin: .28rem 0;
            background-color: #fff;
            padding: .44rem .3rem;
            p {
                border-left:.04rem solid #27ba9b;
                font-size: .4rem;
                font-weight:bold;
                padding-left: .12rem;
                line-height: .4rem;
            }
        }
        .iot_couple {
            width: 9.593rem;
            height: 6.2403rem;
            display: flex;
            justify-content: space-between;
            margin:0  auto .5rem;
            a {
                width: 4.593rem;
                border-radius: .0291rem;
                background-color: #fff;
                padding: .2713rem;
                display: flex;
                flex-wrap: wrap;
            }
            img {
                flex: 1;
                height: 4.0698rem;
            }
            a p:nth-child(2){
                width: 100%;
                height: .8527rem;
                margin-top: .0775rem;
                font-size: .3488rem;
                line-height: .4264rem;
            }
            a p:nth-child(3){
                align-self: flex-end;
                color: #cf4444;
                font-size: .3101rem;
            }
        }
    }
    .iot_bottomChoice{
        position: fixed;
        top: 100.2%;
        transform: translate(0,-100%);
        width: 10rem;
        height: 1.3rem;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        background-color: #fff;
        span{
            display: flex;
            flex-direction: column;
            align-items: center;
            img {
                width: .5rem;
                height: .5rem;
            }
            span {
                font-size: .3101rem;
            }
        }
        div {
            width: 2.92rem;
            height: 1rem;
            border-radius: .5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .36rem;
            color: #ffffff;
        }
    }
    .iot_bottomChoice div:nth-child(4){
        background-color: #ffa868;
    }
    .iot_bottomChoice div:nth-child(5){
        background-color: #27ba9b;
    }
}


// under中的详情
div[class^=iot_Under] {
    transition: all .5s;
    width: 10rem;
    position: fixed;
    top: 100%;
    background-color: #fff;
}
.iot_UnderChoice{
    padding:.4rem .28rem 0;
    img {
        width: 2.4rem;
        height: 2.4rem;
    }
    p{
        display: inline-block;
    }
    div{
        display: flex;
    }
    .iot_under-details{
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: .3rem 0 0 .36rem;
        position: relative;
        img {
            width: .8rem;
            height: .8rem;
            position: absolute;
            top: 0;
            right: 0;
        }
    }
    .iot_under-details p:nth-child(2)::before{
        content: '￥';
        font-size: .44rem;
    }
    .iot_under-details p:nth-child(2){
        font-size: .6rem;
        color: #cf4444;
        margin-bottom: .24rem;
    }
    .iot_under-details p:nth-child(3){
        font-size: .32rem;
        color: #999999;
    }
    .iot_under-details p:nth-child(4){
        font-size: .4rem;
    }
    .iot_underOption{
        flex-direction: column;
        .iot_underUp{
            font-size: .4rem;
            color: #999999;
            margin-top: .54rem;
        }
        div[class^=iot_underDown]{
            display: flex;
            flex-wrap: wrap;
            width: 7rem;
            p {
                border-radius: .04rem;
                border:1px solid #999999;
                font-size: .36rem;
                padding: .08rem .4rem;
                margin: .12rem .24rem .12rem 0;
            }
            p.iot_active{
                border:1px solid #27ba9b;
                color: #27ba9b;
                background-color: #e9f8f5;
            }
        }
    }
    .iot_underNumber{
        margin-top: .8rem;
        align-items: center;
        justify-content: space-between;
        p {
            font-size: .4rem;
        }
        div div:nth-child(2n+1){
            font-size: .7rem;
            align-items: center;
            justify-content: center;
            width: .8rem;
            height: .68rem;
            color: #5f5f5f;
            background-color: #e7e7e7;
        }
        div #iot_black{
            color: #dbdbdb;
            background-color: #f7f7f7;
        }
        div div:nth-child(1){
            border-radius: .08rem 0 0 .08rem;
        }
        div div:nth-child(3){
            border-radius: 0 .08rem .08rem 0;
        }
        div div:nth-child(2) {
            width: 1rem;
            height: .68rem;
            background-color: #e7e7e7;
            font-size: .4rem;
            justify-content: center;
            line-height: .68rem;
            margin: 0 .08rem;
        }
    }
    .iot_buy {
        width: 9.4rem;
        height: .9rem;
        margin: 1rem auto .3rem;
        border-radius: .45rem;
        background-color: #27ba9b;
        font-size: .4rem;
        color: #fff;
        line-height: .9rem;
        justify-content: center;
    }
}
//地址部分
.iot_Underaddress{
    padding: .3rem .4rem 0;
}
.iot_Underaddress div:nth-child(1){
    position: relative;
    display: flex;
    height: 1.4rem;
    padding-bottom: .4rem;
    justify-content: center;
    align-items: center;
    border-bottom: .03rem solid #dddddd;
    font-size: .5rem;
    img {
        position: absolute;
        top: 0;
        right: 0;
        width: .56rem;
        height: .56rem;
    }
}
.iot_Underaddress div:nth-child(2),.iot_Underaddress div:nth-child(3),.iot_Underaddress div:nth-child(4){
    position: relative;
    padding: .6rem 0 0 .24rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    img {
        width: .56rem;
        height: .56rem;
    }
    div {
        display: flex;
        flex-direction: column;
        padding: 0;
        padding-left:.2rem;
        align-items: flex-start;
        height: 1rem;
    }
    div p:nth-child(1){
        font-size: .36rem;
    }
    div p:nth-child(2){
        font-size: .32rem;
        color: #5f5f5f;
    }
    span {
        position: absolute;
        bottom:.22rem;
        right:0;
        display: inline-block;
        width: .56rem;
        height: .56rem;
        border: .03rem solid #000000;
        border-radius: 50%;
    }
    span.iot_mark{
        width: .68rem;
        height: .68rem;
        bottom: .16rem;
        background-image: url(../icons/logo/checkmark.png);
        background-size:cover;
        border: 0;
    }
}
.iot_addAddress{
    display: flex;
    width: 9.4rem;
    height: .9rem;
    margin: 1rem auto .3rem;
    border-radius: .45rem;
    background-color: #27ba9b;
    font-size: .4rem;
    color: #fff;
    line-height: .9rem;
    justify-content: center;
}
//服务说明
.iot_Underservice{
    padding: .3rem .4rem 0;
    height: 10rem;
    .iot_serviceUP{
        position: relative;
        display: flex;
        height: 1.4rem;
        padding-bottom: .4rem;
        justify-content: center;
        align-items: center;
        border-bottom: .03rem solid #dddddd;
        font-size: .5rem;
        img {
            position: absolute;
            top: 0;
            right: 0;
            width: .56rem;
            height: .56rem;
        }
    }
.iot_serviceDown{
        div{
            display: flex;
            margin-top: .5rem;
            flex-direction: column;
        }
        div p:nth-child(1){
            font-size: .4rem;
            margin-left: -0.12rem;
        }
        div p:nth-child(2){
            font-size: .32rem;
            color: #999999;
            margin-left: .22rem;
        }
    }
}

.iot_blackbg{
    width: 10rem;
    background-color: rgba(0,0,0,0.4);
    display: none;
    position: fixed;
}
div[class^=iot_cartIframe]{
    transition: all .5s;
    width: 10rem;
    position: fixed;
    top: 0;
    left: 100%;
    iframe{
        position: fixed;
        width: 10rem;
        transform: translate(0,0);
    }
    img{
        z-index: 1;
        position: absolute;
        transform: translate(.4rem,.4rem);
        width: .6rem;
        height: .6rem;
    }
}
//订单详情
.iot_order{
    position: fixed;
    top: 0;
    left: 100%;
    width: 10rem;
    background-color:#f7f7f7;
    transition: all .5s;
    img{
        z-index: 1;
        position: absolute;
        transform: translate(.4rem,1.7308rem);
        width: .6rem;
        height: .6rem;
    }
    .iot_orderUp{
        position: fixed;
        width: 10rem;
        height: 1.3462rem;
        display: flex;
        align-items: center;
        font-size: .3846rem;
        background-color: #fff;
        div{
            position: absolute;
            width: 1.7308rem;
            height: .0769rem;
            background-color: #27ba9b;
            top: 1.2692rem;
            left: 1rem;
            transform: translate(-50%,0);
            transition: all .5s;
        }
        span{
            flex: 1;
            text-align: center;
        }
    }
    .iot_orderContent{
        width: 50rem;
        display: flex;
        position: absolute;
        font-size: .3846rem;
        color: #999999;
        left: 0;
        top: 1.7308rem;
        transform: translate(0,0);
        transition: all .5s;
        span{
            flex: 1;
            text-align: center;
        }
    }
}